<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>组件嵌套</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root">
           <App></App>
        </div>
    </body>
    
    <script type="text/javascript">
    // 定义学生组件
        const Student = Vue.extend({
        template:`
        <div>
            <h3>学员姓名:{{studentName}}</h3>
            <h3>学员年龄:{{age}}</h3>  
        </div>
        `,
        data(){
            return {
                studentName:'小花花',
                age:'22'  
            }
        }
    })

    // 定义学校组件
        const School = Vue.extend({
        template:`
        <div>
            <h3>学校名称:{{schoolName}}</h3>
            <h3>学校地址:{{address}}</h3>  
            <student></student>
        </div>
        `,
        data(){
            return {
                schoolName:'尚硅谷',
                address:'北京昌平区'  
            }
        },
        components:{
            Student
        }
    })
    // 定义App组件
        const App = Vue.extend({
        template:`
        <div>
            <School></School>
        </div>
        `,
        components:{
           School
        }
    })
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
           components:{
            App
           }
        })
    </script>
</html>